<template>
	<view class="join">
		<!-- <view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="入驻" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()"></uni-nav-bar>
		</view>

		<view class="nav_box"></view> -->

		<!-- 图片+简介 -->
		<view class="upload flex_center">
			<textarea placeholder="请填写自我介绍" placeholder-class="input-placeholder" v-model="introduce"></textarea>
			<view class="image_box">
				<view class="image_white" @click="chooseImage" v-if="!images.length">
					<image :src="$util.prefix('test/test.jpg')" mode="aspectFill"></image>
					<view class="tag">上传图片</view>
				</view>
				<swiper :autoplay="true" :interval="3000" :duration="300" v-else>
					<swiper-item v-for="(item,index) in images" :key="index">
						<view class="swiper-item" @click="$util.previewImage(images,index)">
							<image :src="item" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="wechat flex_center">
			<view class="left flex_center">
				<image :src="$util.prefix('public/icon_call.png')"></image>
				<text>联系方式</text>
			</view>
			<view class="right">
				<input type="text" v-model="wechat" placeholder="请输入" placeholder-class="input-placeholder" />
			</view>
		</view>

		<!-- 标签 -->
		<view class="tags">
			<view class="tags_title flex_r_between">
				<view class="block flex_center">
					<image :src="$util.prefix('public/icon_shengao.png')"></image>
					<text>添加标签(最多3个)</text>
				</view>

				<view class="block flex_center" @click="show_tags_input=true">
					<image :src="$util.prefix('public/icon_biji.png')" style="width: 24rpx;height: 24rpx;"></image>
					<text style="font-size: 24rpx;color: #999;">手动添加</text>
				</view>
			</view>
			<view class="tags_list flex_center">
				<view class="tags_item flex_r_around" v-for="(item,index) in tags" :key="index">
					<text>{{ item }}</text>
					<view class="tags_list_icon" @click="tags.splice(index , 1)">
						<u-icon name="close-circle-fill" color="#FD2A53" size="32rpx"></u-icon>
					</view>
				</view>
			</view>



			<view class="tags_example">
				<scroll-view scroll-x="true">
					<view class="flex_center">
						<view class="tags_example_item" v-for="(item,index) in tags_example_list" :key="index"
							@click="addTagsText(item)">
							{{ item }}
						</view>
					</view>
				</scroll-view>
			</view>

		</view>

		<view class="product" v-if="user.store_id > 0 || user.sign_store_id > 0">
			<view class="product_title flex_r_between">
				<view class="block flex_center">
					<image :src="$util.prefix('public/icon_daihuo.png')"></image>
					<text>商品链接<i class="gery">(选填:最多10个)</i></text>
				</view>

				<view class="block flex_center">
					<text class="gery">如：商品</text>
					<image :src="$util.prefix('public/arrow-right-fill.png')" class="w24"></image>
				</view>
			</view>

			<view class="product_content">
				<scroll-view scroll-x="true">
					<view class="list flex_center">
						<view class="item" v-for="(item,index) in list" :key="index" @click="chooseAction(item)">
							<image class="goods_image" :src="$util.getAvatar(item.goods_image)" mode="aspectFill">
							</image>
							<image class="select"
								:src="`/static/public/select${action_ids.indexOf(item.id) > -1 ? '_s' : ''}.png`">
							</image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="btn flex_r_around" @click="onSubmit">
			<text>确定</text>
		</view>


		<!-- 输入标签 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :safeAreaInsetBottom="false" :show="show_tags_input" :round="10" mode="center"
				@close="show_tags_input = false">
				<view class="tags_input flex_c">
					<view class="title">添加标签</view>
					<view class="input">
						<input type="text" placeholder-class="input-placeholder" placeholder="请输入标签" v-model="tags_text"
							@confirm="onEenterTag" />
					</view>
					<view class="submit flex_r_around" @click="onEenterTag">
						<text>确定</text>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 支付 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :safeAreaInsetBottom="false" mode="bottom" :show="to_pay_show" @close="to_pay_show = false"
				bgColor="transparent">
				<view class="to_pay_show flex_c">
					<view class="title">支付</view>
					<view class="price">
						<i>￥</i>
						<text>{{ Number(order_price).toFixed(2) }}</text>
					</view>
					<view class="pay_type">

						<view class="item flex_r_between" @click="pay_type = 1">
							<view class="left flex_center">
								<image src="/static/public/wechat.png"></image>
								<text>微信</text>
							</view>

							<view class="right flex_center">
								<text></text>
								<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
							</view>
						</view>

						<view class="item flex_r_between" @click="pay_type = 2">
							<view class="left flex_center">
								<image src="/static/public/alipay.png"></image>
								<text>支付宝</text>
							</view>

							<view class="right flex_center">
								<text></text>
								<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
							</view>
						</view>

					</view>
					<view class="btn" @click="toPay">确认支付</view>
				</view>
			</u-popup>
		</view>

		<w-compress ref='wCompress' />

		<u-modal :show="show_back" title="提示" content='发布成功' :closeOnClickOverlay="true" cancelText="我知道了"
			:showConfirmButton='false' :showCancelButton='true' @close="show_back = false"
			@cancel="$native.backAction()">
		</u-modal>

	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue';
	export default {
		components: {
			WCompress,
		},
		data() {
			return {
				id: 0,

				user: {},

				images: [],

				// 个人介绍
				introduce: '',


				show_tags_input: false,
				tags_text: '',
				tags: [],

				tags_example_list: [
					'处CP',
					'游戏开黑',
					'找对象',
					'虚拟恋人',
					'旅游',
					'骑行',
					'羽毛球',
					'麻将',
				],

				page: 1,
				list: [],
				total: 1,

				action_ids: [],

				circle_id: 0,

				// 修改支付
				to_pay_show: false,
				order_id: 0,
				order_price: 0,
				pay_type: 1,

				// 微信
				wechat: '',

				show_back: false,



			}
		},
		methods: {

			preventHandler() {
				return;
			},

			// 选择图片上传
			chooseImage() {
				this.$native.authorize('photos');
				var count = 9 - this.images.length;
				uni.chooseImage({
					count: count,
					success: (file) => {
						file.tempFilePaths.forEach(element => {
							this.$refs.wCompress.start(element, {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 0.6, // 压缩质量，默认0.8
								type: 'png', // 图片类型，默认jpg
								// base64: false, // 是否返回base64，默认false，非H5有效
							}).then(url => {
								this.$upload(url, {
									type: 'picture'
								}).then(res => {
									if (res.status == 2 || res.status == 1) {
										this.images.push(res.result.url);
									} else {
										this.$util.msg(res.msg);
									}
								});
							});
						})

					}
				})
			},

			onEenterTag(e) {
				if (!this.tags_text) {
					return this.$util.msg('请填写标签')
				}
				if (this.tags.length < 3) {
					this.tags.push(this.tags_text);
				} else {
					this.show_tags_input = false;
					return this.$util.msg('最多添加三个标签')
				}
				this.tags_text = '';
				this.show_tags_input = false;
			},

			addTagsText(e) {
				if (this.tags.length < 3) {
					this.tags.push(e);
				} else {
					return this.$util.msg('最多添加三个标签')
				}
			},

			getUser() {
				this.$get('user/info').then(res => {
					this.user = res.data;
					uni.setStorageSync('user', res.data);
					if (this.user.store_id > 0) {
						this.getStoreList(this.user.store_id);
					} else if (this.user.sign_store_id > 0) {
						this.getStoreList(this.user.sign_store_id);
					}

				})
			},

			getStoreList(store_id) {
				this.$get('/store_goods/getGoodsList', {
					page: this.page,
					store_id: store_id,
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				});
			},

			chooseAction(item) {
				var index = this.action_ids.indexOf(item.id);
				if (index > -1) {
					this.action_ids.splice(index, 1);
				} else {
					if (this.action_ids.length >= 10) {
						return this.$util.msg('最多可选择10个商品链接');
					}
					this.action_ids.push(item.id);
				}
			},

			onSubmit(pay) {

				if (!this.images.length) {
					return this.$util.msg('请上传图片');
				}

				if (!this.introduce) {
					return this.$util.msg('请填写个人介绍');
				}

				if (!this.tags.length) {
					return this.$util.msg('请添加标签');
				}

				if (!this.wechat) {
					return this.$util.msg('请添加联系方式');
				}

				uni.showLoading({
					mask: true
				});


				this.$post('/circle.circle_call_card/createCard', {
					circle_id: this.circle_id || 0,
					type: 1,
					images: this.images.join(','),
					introduce: this.introduce,
					action_type: 1,
					action_ids: this.action_ids.join(','),
					id: this.id,
					is_pay: pay ? 1 : 0,
					tags: this.tags.join(','),
					wechat: this.wechat
				}, true, (res) => {
					uni.hideLoading();
					if (res.code == 2010) {
						this.order_id = res.data.id;
						this.order_price = res.data.price;
						this.to_pay_show = true;
					} else if (res.code == 401) {
						this.$native.toJinBiRecharge();
					}
				}).then(res => {
					if (this.id && this.id != '0') {
						this.$native.setCardSuccess();
					}
					uni.hideLoading();
					this.show_back = true;
				});

			},

			// 调用原生支付
			toPay() {
				uni.showLoading({
					mask: true
				});
				this.$post('/pay/sendCallCard', {
					pay_type: this.pay_type,
					order_id: this.order_id
				}, true, () => {
					uni.hideLoading();
				}).then(res => {
					this.$native.toPayCard({
						data: res.data,
						pay_type: this.pay_type
					});
				});
			},

			paySuccess() {
				this.to_pay_show = false;
				this.show_back = true;
				this.onSubmit(true);
				uni.hideLoading();
			},

			payFail() {
				uni.hideLoading();
			},

			getDetail() {
				if (this.id && this.id != '0') {
					this.$get('/circle.circle_call_card/getDetail', {
						id: this.id
					}).then(res => {
						// 图片回显
						if (res.data.images.indexOf(',') > -1) {
							this.images = res.data.images.split(',');
						} else {
							this.images = [res.data.images];
						}

						if (res.data.action_ids) {
							this.action_ids = res.data.action_ids;
						}

						if (res.data.tags) {
							if (res.data.tags.indexOf(',') > -1) {
								this.tags = res.data.tags.split(',');
							} else {
								this.tags = [res.data.tags];
							}
						}

						// 个人介绍
						this.introduce = res.data.introduce;
						this.wechat = res.data.wechat;

						// 圈子
						this.circle_id = res.data.circle_id;

					})
				}
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.circle_id = option.circle_id || 0;
			this.id = option.id || 0;
			this.getDetail();
			this.getUser();

			window.paySuccess = this.paySuccess;
			window.payFail = this.payFail;
		}
	}
</script>

<style lang="less" scoped>
	.join {
		padding: 32rpx 32rpx 140rpx;
	}

	.upload {
		width: 686rpx;
		height: 260rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;

		textarea {
			height: 100%;
			font-size: 28rpx;
			color: #333;
			line-height: 32rpx;
		}

		.image_box {
			width: 160rpx;
			height: 212rpx;

			swiper {
				width: 160rpx;
				height: 212rpx;

				.swiper-item {
					width: 160rpx;
					height: 212rpx;
					border-radius: 16rpx;
					overflow: hidden;

					image {
						width: 160rpx;
						height: 212rpx;
						border-radius: 16rpx;
						overflow: hidden;
					}
				}
			}

			.image_white {
				width: 160rpx;
				height: 212rpx;
				position: relative;
				border-radius: 16rpx;
				overflow: hidden;

				image {
					width: 160rpx;
					height: 212rpx;
				}

				.tag {
					width: 160rpx;
					height: 48rpx;
					background: rgba(0, 0, 0, 0.5);
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 48rpx;
					text-align: center;
					position: absolute;
					bottom: 0;
					left: 0;
				}
			}
		}
	}

	.wechat {
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-top: 20rpx;

		.left {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 28rpx;
				color: #131313;
			}
		}

		.right {
			flex: 1;

			input {
				width: 100%;
				text-align: right;
			}
		}
	}

	.tags {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 38rpx 32rpx;
		margin-top: 20rpx;

		.tags_title {
			margin-bottom: 30rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 28rpx;
				color: #131313;
			}
		}

		.tags_list {
			flex-wrap: wrap;
			margin-bottom: 18rpx;

			.tags_item {
				height: 56rpx;
				background: #F7F7F7;
				border-radius: 8rpx;
				padding: 0 36rpx;
				margin-right: 20rpx;
				margin: 8rpx 20rpx 8rpx 0;
				position: relative;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 56rpx;
				}

				.tags_list_icon {
					position: absolute;
					right: -12rpx;
					top: -12rpx;
				}

			}
		}

		.tags_input {
			height: 96rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 0 24rpx;

			input {
				height: 96rpx;
				font-size: 26rpx;
				color: #333;
			}
		}

		.tags_example {
			margin-top: 16rpx;

			scroller-view {
				width: 100%;
			}

			.tags_example_item {
				height: 64rpx;
				background: #F0F0F0;
				border-radius: 16rpx;
				padding: 0 32rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #666;
				line-height: 64rpx;
				margin-right: 16rpx;
				flex-shrink: 0;
			}
		}

	}

	.product {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 34rpx 32rpx;

		.product_title {
			margin-bottom: 30rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 28rpx;
				color: #131313;
			}

			.w24 {
				width: 24rpx;
				height: 24rpx;
				margin: 0 0 0 16rpx;
			}

			.gery {
				color: #999999;
				font-style: normal;
			}
		}

		.product_content {
			overflow: hidden;

			scroll-view {
				width: 100%;
			}

			.list {
				.item {
					margin-right: 16rpx;
					position: relative;
					width: 176rpx;
					height: 176rpx;

					.goods_image {
						width: 176rpx;
						height: 176rpx;
						background: #D8D8D8;
						border-radius: 16rpx;
					}

					.select {
						position: absolute;
						top: 8rpx;
						right: 8rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}

	}

	.btn {
		width: 560rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		border: 2rpx solid #FD2A53;
		position: fixed;
		bottom: 32rpx;
		right: 96rpx;

		text {
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.tags_input {
		width: 616rpx;
		height: 412rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 40rpx 0 0;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			line-height: 50rpx;
		}

		.input {
			width: 520rpx;
			height: 96rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 0 32rpx;
			margin: 32rpx 0 50rpx;

			input {
				height: 96rpx;
			}
		}

		.submit {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>